<!DOCTYPE html>
<html>
<head>
	<title>精通D3.js - 目录</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<style>
	.pageTitle{
	}

	.book {
		width: 570px;
	}

	.bookImage{
		clear: right;
		float: right;
		width: 200px;
		height: 270px;
	}

	.bookDes{
		clear: left;
		float: left;
		text-align: left;
		width: 350px;
		height: 270px;
	}

	.bookDes p {
		font-size: 13px;
	}

	.booklist {
		clear: left;
		float: left;
		width: 570px;
		text-align: left;
	}

	.chapter p{
		font-size: 20px;
		font-weight: bold;
	}

	.console {
		font-size: 12px;
	}
	</style>
</head>
<body>

<h1 class="pageTitle">《精通 D3.js》源代码目录</h1>

<div class="book">
<div class="bookDes">
<p>大家好，我是<strong>吕之华</strong>，也叫<strong>馒头华华</strong>。</p>
<p><strong>《精通 D3.js》</strong>总算是顺利完成，目前已经发售，在京东、天猫、当当等各大网站都可以买到，希望大家能喜欢。</p>
<p>以下是本书的<strong>源代码</strong>目录，由于时间仓促，可能隐藏有不少错误。如遇到问题，请大家到 OUR D3.JS 留言，本人尽最大努力为各位朋友解答。</p>
<p>单击以下链接后，即可查看代码运行结果，部分结果需打开控制台（按F12，选择console）查看。右键单击页面，选择“查看源代码”可以查看源代码。</p>
<p style="color:red">注意：以下所有代码均在谷歌浏览器（Chrome）下测试，不能保证其他浏览器一定能运行。从目前的情况来看，谷歌浏览器对 D3.js 的支持是最完美的，建议使用。</p>
</div>
<div class="bookImage"><img src="./images/book.png"></img></div>
</div>

<div class="booklist">
	<div class="chapter">
		<p>第二章：Web 前端开发基础</p>
		<ul>
			<li>第 2 节：<a href="./chapter2/2.2/2-2-3-HTML-CSS.html">HTML 和 CSS</a></li>
			<li>第 5 节（SVG）：
			<a href="./chapter2/2.5/2-5-2-1-rect.svg">矩形</a>,
			<a href="./chapter2/2.5/2-5-2-2-circle.svg">圆形</a>,
			<a href="./chapter2/2.5/2-5-2-3-line.svg">线段</a>,
			<a href="./chapter2/2.5/2-5-2-4-polygon.svg">多边形和折线</a>,
			<a href="./chapter2/2.5/2-5-2-5-path.svg">路径</a>,
			<a href="./chapter2/2.5/2-5-2-6-bezier3.svg">三次贝塞尔曲线</a>,
			<a href="./chapter2/2.5/2-5-2-7-bezier2.svg">二次贝塞尔曲线</a>,
			<a href="./chapter2/2.5/2-5-2-8-arc.svg">弧线</a>,
			<a href="./chapter2/2.5/2-5-3-1-text.svg">文字</a>,
			<a href="./chapter2/2.5/2-5-5-1-marker.svg">标记</a>,
			<a href="./chapter2/2.5/2-5-6-1-blur.svg">模糊</a>,
			<a href="./chapter2/2.5/2-5-7-1-gradient.svg">渐变</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第三章：安装和使用</p>
		<ul>
			<li>第 3 节：<a href="./chapter3/3.3/3-3-1-HelloWorld.html">Hello World</a></li>
			<li>第 4 节：<a href="./chapter3/3.4/3-4-1-drawVectorGraph.html">绘制矢量图</a></li>
		</ul>
	</div>
	<div class="chapter">
		<p>第四章：选择集与数据</p>
		<ul>
			<li>第 7 节：
			<a href="./chapter4/4.7/4-7-1-rect-text.html">矩形和文字</a>,
			<a href="./chapter4/4.7/4-7-2-update-data.html">更新数据</a>
		</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第五章：比例尺和坐标轴</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果</div>
		<ul>
			<li>第 1 节：
			<a href="./chapter5/5.1/5-1-1-linearScale.html">线性比例尺</a>,
			<a href="./chapter5/5.1/5-1-2-powScale.html">指数比例尺</a>,
			<a href="./chapter5/5.1/5-1-3-quantizeScale.html">量子和分位比例尺</a>,
			<a href="./chapter5/5.1/5-1-4-thresholdScale.html">阈值比例尺</a>
			</li>
			<li>第 2 节：
			<a href="./chapter5/5.2/5-2-1-ordinalScale.html">序数比例尺</a>,
			<a href="./chapter5/5.2/5-2-2-colorScale.html">颜色比例尺</a>
			</li>
			<li>第 3 节：
			<a href="./chapter5/5.3/5-3-1-drawAxis.html">绘制坐标轴</a>,
			<a href="./chapter5/5.3/5-3-2-degree.html">刻度</a>,
			<a href="./chapter5/5.3/5-3-3-manyAxes.html">各比例尺的坐标轴</a>
			</li>
			<li>第 4 节：
			<a href="./chapter5/5.4/5-4-1-bargraph.html">柱形图的坐标轴</a>
			</li>
			<li>第 5 节：
			<a href="./chapter5/5.5/5-5-1-scatter.html">散点图的制作</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第六章：绘制</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果</div>
		<ul>
			<li>第 1 节：
				<a href="./chapter6/6.1/6-1-1-RGB.html">RGB颜色</a>,
				<a href="./chapter6/6.1/6-1-2-HSL.html">HSL颜色</a>,
				<a href="./chapter6/6.1/6-1-3-interpolation.html">插值</a>
			</li>
			<li>第 2 节：
				<a href="./chapter6/6.2/6-2-1-lineGenerator.html">线段生成器的简例</a>,
				<a href="./chapter6/6.2/6-2-2-accessor.html">x和y的访问器</a>,
				<a href="./chapter6/6.2/6-2-3-defined.html">线段生成器的defined</a>
			</li>
			<li>第 3 节：
				<a href="./chapter6/6.3/6-3-1-areaGenerator.html">区域生成器</a>
			</li>
			<li>第 4 节：
				<a href="./chapter6/6.4/6-4-1-arcGenerator.html">弧线生成器</a>,
				<a href="./chapter6/6.4/6-4-2-makePie.html">饼状图试作</a>
			</li>
			<li>第 5 节：
				<a href="./chapter6/6.5/6-5-1-symbolGenerator.html">符号生成器</a>
			</li>
			<li>第 6 节：
				<a href="./chapter6/6.6/6-6-1-chordGenerator.html">弦生成器</a>
			</li>
			<li>第 7 节：
				<a href="./chapter6/6.7/6-7-1-diagonalGenerator.html">对角线生成器</a>,
				<a href="./chapter6/6.7/6-7-2-projection.html">投影</a>
			</li>
			<li>第 8 节：
				<a href="./chapter6/6.8/6-8-1-lineChart.html">折线图</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第七章：动画</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果</div>
		<ul>
			<li>第 1 节：
				<a href="./chapter7/7.1/7-1-1-1-rectTransition.html">简单的矩形过渡</a>,
				<a href="./chapter7/7.1/7-1-1-2-transitionObj.html">过渡对象</a>,
				<a href="./chapter7/7.1/7-1-1-3-duration-delay.html">过渡时间和延迟</a>,
				<a href="./chapter7/7.1/7-1-1-4-someTimes.html">多次过渡</a>,
				<a href="./chapter7/7.1/7-1-2-1-attr-attrTween.html">attr和attrTween</a>,
				<a href="./chapter7/7.1/7-1-2-2-style-styleTween.html">style和styleTween</a>,
				<a href="./chapter7/7.1/7-1-2-3-text-tween.html">text和tween</a>,
				<a href="./chapter7/7.1/7-1-3-childElement.html">子元素</a>,
				<a href="./chapter7/7.1/7-1-4-1-transition-each.html">过渡的each</a>,
				<a href="./chapter7/7.1/7-1-4-2-transition-call.html">过渡的call</a>,
				<a href="./chapter7/7.1/7-1-5-ease.html">ease</a>
			</li>
			<li>第 3 节：<a href="./chapter7/7.3/7-3-scatter-transition.html">散点图的过渡</a></li>
			<li>第 4 节：
				<a href="./chapter7/7.4/7-4-1-clock.html">时钟</a>,
				<a href="./chapter7/7.4/7-4-2-collision.html">小球碰撞</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第八章：交互</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果</div>
		<ul>
			<li>第 1 节：
				<a href="./chapter8/8.1/8-1-1-mouse.html">鼠标交互</a>,
				<a href="./chapter8/8.1/8-1-2-keyboard.html">键盘交互</a>,
				<a href="./chapter8/8.1/8-1-3-touch.html">触屏交互</a>
			</li>
			<li>第 2 节：<a href="./chapter8/8.2/8-2-1-d3.event.html">d3.event</a></li>
			<li>第 3 节：
				<a href="./chapter8/8.3/8-3-1-drag.html">拖拽</a>,
				<a href="./chapter8/8.3/8-3-2-drag.origin.html">drag.origin的应用</a>,
				<a href="./chapter8/8.3/8-3-3-scale.html">缩放</a>,
				<a href="./chapter8/8.3/8-3-4-scale2.html">缩放2</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第九章：导入和导出</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果。部分内容需要在安装有服务器软件（例如 Apache）的情况下，将文件放到服务器根目录下才能运行。</div>
		<ul>
			<li>第 1 节：
				<a href="./chapter9/9.1/9-1-1-readjson.html">readjson</a>,
				<a href="./chapter9/9.1/9-1-3-readxml.html">readxml</a>,
				<a href="./chapter9/9.1/9-1-4-readtext.html">readtext</a>
			</li>
			<li>第 2 节：<a href="./chapter9/9.2/9-2-1-d3-downloadable.html">d3-downloadable</a></li>
		</ul>
	</div>
	<div class="chapter">
		<p>第十章：布局</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果。部分内容需要在安装有服务器软件（例如 Apache）的情况下，将文件放到服务器根目录下才能运行。</div>
		<ul>
			<li>第 2 节：<a href="./chapter10/10.2/10-2-pie.html">饼状图</a></li>
			<li>第 3 节：
				<a href="./chapter10/10.3/10-3-1-force.html">力导向图</a>,
				<a href="./chapter10/10.3/10-3-2-drag-fixed.html">拖拽固定</a>
			</li>
			<li>第 4 节：
				<a href="./chapter10/10.4/10-4-1-chord.html">弦图</a>,
				<a href="./chapter10/10.4/10-4-2-chord-interactive.html">交互式弦图</a>
			</li>
			<li>第 5 节：<a href="./chapter10/10.5/10-5-1-tree.html">树状图</a></li>
			<li>第 6 节：
				<a href="./chapter10/10.6/10-6-1-cluster.html">集群图</a>,
				<a href="./chapter10/10.6/10-6-2-cluster-circle.html">圆状集群图</a>
			</li>
			<li>第 7 节：<a href="./chapter10/10.7/10-7-1-bundle.html">捆图</a></li>
			<li>第 8 节：<a href="./chapter10/10.8/10-8-1-pack.html">打包图</a></li>
			<li>第 9 节：<a href="./chapter10/10.9/10-9-1-histogram.html">直方图</a></li>
			<li>第 10 节：
				<a href="./chapter10/10.10/10-10-1-rect-partition.html">矩形分区图</a>,
				<a href="./chapter10/10.10/10-10-2-circle-partition.html">圆形分区图</a>
			</li>
			<li>第 11 节：
				<a href="./chapter10/10.11/10-11-1-stack.html">堆栈图</a>,
				<a href="./chapter10/10.11/10-11-2-areaStack.html">面积堆栈图</a>
			</li>
			<li>第 12 节：<a href="./chapter10/10.12/10-12-1-treemap.html">矩阵树图</a></li>
		</ul>
	</div>
	<div class="chapter">
		<p>第十一章：地图</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果。部分内容需要在安装有服务器软件（例如 Apache）的情况下，将文件放到服务器根目录下才能运行。</div>
		<ul>
			<li>第 2.1 节：
				<a href="./chapter11/11.2/11.2.1/11-2-1-GeoJSON-chinamap.html">基于GeoJSON绘制中国地图</a>
			</li>
			<li>第 2.2 节：
				<a href="./chapter11/11.2/11.2.2/11.2.2.1/11-2-2-1-TopoJSON-chinamap.html">基于TopoJSON绘制中国地图</a>,
				<a href="./chapter11/11.2/11.2.2/11.2.2.2/12-2-2-2-merge.html">合并东南地区</a>,
				<a href="./chapter11/11.2/11.2.2/11.2.2.3/12-2-2-3-mesh.html">绘制边界线</a>,
				<a href="./chapter11/11.2/11.2.2/11.2.2.4/12-2-2-4-neighbors.html">计算相邻地区</a>
			</li>
			<li>第 3.1 节：
				<a href="./chapter11/11.3/11.3.1/11-3-1-geopath.html">地理路径生成器</a>
			</li>
			<li>第 3.2 节：
				<a href="./chapter11/11.3/11.3.2/11-3-2-1-grid-world.html">平铺在经纬线网格上的世界地图</a>,
				<a href="./chapter11/11.3/11.3.2/11-3-2-2-grid-china.html">平铺在经纬线网格上的中国地图</a>,
				<a href="./chapter11/11.3/11.3.2/11-3-2-3-circle-grid.html">世界地图上添加圆形网格</a>,
				<a href="./chapter11/11.3/11.3.2/11-3-2-4-sphere-grid.html">球体地图上的圆形网格</a>
			</li>
			<li>第 4 节：
				<a href="./chapter11/11.4/11-4-1-set-beijing.html">设置地图的原点为北京</a>,
				<a href="./chapter11/11.4/11-4-2-set-london.html">设置地图的原点为伦敦</a>,
				<a href="./chapter11/11.4/11-4-3-mark-washington.html">标注华盛顿</a>,
				<a href="./chapter11/11.4/11-4-4-clip-right.html">裁剪掉右半部分</a>,
				<a href="./chapter11/11.4/11-4-5-rotate.html">旋转</a>
			</li>
			<li>第 5 节：
				<a href="./chapter11/11.5/11-5-sphere-math.html">球面数学</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第十二章：友好的交互</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果。部分内容需要在安装有服务器软件（例如 Apache）的情况下，将文件放到服务器根目录下才能运行。</div>
		<ul>
			<li>第 1 节：
				<a href="./chapter12/12.1/12-1-1-tooltip.html">创建提示框</a>,
				<a href="./chapter12/12.1/12-1-2-tooltip-style.html">提示框的样式</a>,
				<a href="./chapter12/12.1/12-1-2-tooltip-style2.html">提示框的样式2</a>
			</li>
			<li>第 2 节：
				<a href="./chapter12/12.2/12-2-1-focusLine.html">折线图的坐标轴对齐线</a>,
				<a href="./chapter12/12.2/12-2-2-tooltip.html">折线图的提示框</a>
			</li>
			<li>第 3 节：
				<a href="./chapter12/12.3/12-3-1-pie-drag.html">拖拽饼状图</a>,
				<a href="./chapter12/12.3/12-3-2-merge-split.html">合并和拆分</a>,
				<a href="./chapter12/12.3/12-3-3-combination.html">元素组合</a>
			</li>
			<li>第 4 节：
				<a href="./chapter12/12.4/12-4-1-selectArea.html">在SVG画布里选择一块区域</a>,
				<a href="./chapter12/12.4/12-4-2-selectArea-scatter.html">散点图的区域选择</a>
			</li>
			<li>第 5 节：
				<a href="./chapter12/12.5/12-5-1-switch.html">开关</a>
			</li>
		</ul>
	</div>
	<div class="chapter">
		<p>第十三章：地图进阶</p>
		<div class="console">* 本章部分代码需打开控制台（按F12选择console）查看结果。部分内容需要在安装有服务器软件（例如 Apache）的情况下，将文件放到服务器根目录下才能运行。</div>
		<ul>
			<li>第 1 节：
				<a href="./chapter13/13.1/13-1-colorRange.html">值域和颜色渐变</a>
			</li>
			<li>第 2 节：
				<a href="./chapter13/13.2/13-2-1-mark-place.html">标注地点</a>,
				<a href="./chapter13/13.2/13-2-2-night-light.html">夜光图</a>
			</li>
			<li>第 3 节：
				<a href="./chapter13/13.3/13-3-1-arrow-line.html">带箭头的标线</a>,
				<a href="./chapter13/13.3/13-3-2-sphere-line.html">球体的标线</a>
			</li>
			<li>第 4 节：
				<a href="./chapter13/13.4/13-4-1-plane-drag-scale.html">平面地图的拖拽和缩放</a>,
				<a href="./chapter13/13.4/13-4-2-globe-drag-scale.html">球面地图的拖拽和缩放</a>
			</li>
			<li>第 5 节：
				<a href="./chapter13/13.5/13-5-1-triangulation.html">三角剖分</a>,
				<a href="./chapter13/13.5/13-5-1-voronoi.html">沃罗诺伊图</a>,
				<a href="./chapter13/13.5/13-5-2-force-directed-map.html">力导向地图</a>
			</li>
		</ul>
	</div>
</div>

</body>
</html>